<template>
    <div :id="id">
        <component :key="index" :style="{width: element.style.width.pixel + 'px', height: element.style.height.pixel + 'px'}" :reverse="element.attribute.reverseType" :color="[element.attribute.colorGroup[0], element.attribute.colorGroup[1]]" :is="'dv-border-box-' + element.attribute.tag">
            <div class="box-model-input">{{ element.data.text ? element.data.text : null }}</div>
        </component>
    </div>
</template>

<script>
import register from '@/js/main/register.js';
export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        }
    },
    data() {
        return {
            index: 0
        }
    },
    methods: {
        redraw() {
            this.$nextTick(() => {
                this.index++
            });
        }
    },
    created() {
        register.addComponent(this);
    },
    destroyed() {
        register.removeComponent(this);
    }
};
</script>

<style lang='scss' scoped>
.box-model-input {
    height: 60px;
    line-height: 60px;
    text-align: center;
}
</style>